<template>
  <div class="header-wrapper">
    <div class="left-wrapper">
      <div class="logo-wrapper">
        <img :src="Logo" />
      </div>
      <span class="title">Vue Admin Work</span>
    </div>
    <div style="flex: 1"></div>
    <div class="right-wrapper">
      <n-menu
        class="m-menu__wrapper"
        mode="horizontal"
        :options="menuOptions"
        :value="currentKey"
        :default-value="currentKey"
        @update:value="onUpdateValue"
      ></n-menu>
      <div class="m-dropdown__wrapper">
        <n-dropdown :options="menuOptions" @select="onUpdateValue">
          <n-icon size="30">
            <Menu />
          </n-icon>
        </n-dropdown>
      </div>
      <n-switch v-model:value="checked" @update:value="onUpdateSwitchValue">
        <template #checked>
          <span>🌜</span>
        </template>
        <template #unchecked>
          <span>🌞</span>
        </template>
      </n-switch>
    </div>
  </div>
</template>
<script setup lang="ts">
import Logo from "../assets/logo.png";
import { NMenu, NSwitch, NIcon, NBadge, MenuOption, NDropdown } from "naive-ui";
import { h, onMounted, ref, nextTick, watch } from "vue";
import { CaretDownOutline, Menu } from "@vicons/ionicons5";
import { useRoute, useRouter } from "vue-router";
const emit = defineEmits(["on-change-theme"]);
const menuOptions: MenuOption[] = [
  {
    label: () => h("span", "首页"),
    key: "index",
  },
  {
    label: "指南&组件",
    key: "guide",
  },
  {
    label: () =>
      h("div", [
        h(NBadge, { value: "new", style: { float: "right" } }),
        h("span", "生态&授权"),
      ]),
    key: "permission",
  },
  {
    label: () => h("span", "关于我们"),
    key: "about",
  },
  {
    label: "常见问题",
    key: "question",
  },
];
const checked = ref(new Date().getHours() > 18);
const router = useRouter();
const route = useRoute();
const currentKey = ref();
onMounted(() => {
  emit("on-change-theme", checked.value);
  setTimeout(() => {
    currentKey.value = route.path.startsWith("/guide") ? "guide" : route.name;
  }, 1000);
});
const onUpdateValue = (item: any) => {
  if (item.startsWith("https://") || item.startsWith("http://")) {
    window.open(item);
  } else {
    router.replace({ name: item });
  }
};
const onUpdateSwitchValue = (value: boolean) => {
  checked.value = value;
  emit("on-change-theme", value);
};
watch(
  () => route.path,
  () => {
    currentKey.value = route.path.startsWith("/guide") ? "guide" : route.name;
  }
);
</script>

<style scoped lang="scss">
@media screen and (max-width: 960px) {
  .header-wrapper {
    .left-wrapper {
      .title {
        display: none;
      }
    }
    .right-wrapper {
      .m-menu__wrapper {
        display: none;
      }
      .m-dropdown__wrapper {
        display: inline-block !important;
        margin-right: 30px;
        vertical-align: middle;
      }
    }
  }
}
.header-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  .left-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    .logo-wrapper {
      display: inline-block;
      width: 35px;
      height: 35px;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      margin-left: 10px;
      font-size: 16px;
      font-weight: 500;
    }
  }
  .right-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    .m-dropdown__wrapper {
      display: none;
    }
  }
}
</style>
